<template>
  <div class="home-page">
    <!-- 顶部欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1 class="welcome-title">
          民法典H5应用
        </h1>
        <p class="welcome-subtitle">
          快速查询民法典条文，支持智能搜索和章节浏览
        </p>
        
        <!-- 主搜索框 -->
        <div class="main-search">
          <SearchBox
            :placeholder="'搜索民法典条文、关键词...'"
            :auto-focus="true"
            :show-suggestions="true"
            :show-history="true"
            @search="handleSearch"
          />
        </div>
      </div>
    </div>
    
    <!-- 快捷功能区域 -->
    <div class="quick-actions">
      <div class="quick-action-grid">
        <router-link
          to="/browse"
          class="quick-action-card"
        >
          <BookOpenIcon class="quick-action-icon" />
          <h3>章节浏览</h3>
          <p>按编章节浏览民法典</p>
        </router-link>
        
        <router-link
          to="/favorites"
          class="quick-action-card"
        >
          <HeartIcon class="quick-action-icon" />
          <h3>我的收藏</h3>
          <p>查看收藏的法条</p>
          <span
            v-if="favoritesCount > 0"
            class="badge"
          >{{ favoritesCount }}</span>
        </router-link>
        
        <router-link
          to="/search"
          class="quick-action-card"
        >
          <MagnifyingGlassIcon class="quick-action-icon" />
          <h3>搜索历史</h3>
          <p>查看搜索记录</p>
        </router-link>
        
        <router-link
          to="/settings"
          class="quick-action-card"
        >
          <Cog6ToothIcon class="quick-action-icon" />
          <h3>应用设置</h3>
          <p>字体大小、主题设置</p>
        </router-link>
      </div>
    </div>
    
    <!-- 最近搜索 -->
    <div
      v-if="hasRecentSearches"
      class="recent-section"
    >
      <h2 class="section-title">
        最近搜索
      </h2>
      <div class="recent-searches">
        <button
          v-for="search in recentSearches"
          :key="search.query"
          class="recent-search-tag"
          @click="handleQuickSearch(search.query)"
        >
          <ClockIcon class="w-4 h-4 mr-1" />
          {{ search.query }}
          <span class="text-xs text-gray-500 ml-1">
            ({{ search.result_count }}条)
          </span>
        </button>
      </div>
    </div>
    
    <!-- 统计信息 -->
    <div class="stats-section">
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-number">
            1260
          </div>
          <div class="stat-label">
            法条总数
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-number">
            7
          </div>
          <div class="stat-label">
            编
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-number">
            {{ favoritesCount }}
          </div>
          <div class="stat-label">
            我的收藏
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-number">
            {{ searchHistoryCount }}
          </div>
          <div class="stat-label">
            搜索历史
          </div>
        </div>
      </div>
    </div>
    
    <!-- 热门搜索 -->
    <div class="popular-section">
      <h2 class="section-title">
        热门搜索
      </h2>
      <div class="popular-tags">
        <button
          v-for="tag in popularTags"
          :key="tag"
          class="popular-tag"
          @click="handleQuickSearch(tag)"
        >
          {{ tag }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  BookOpenIcon,
  HeartIcon,
  MagnifyingGlassIcon,
  Cog6ToothIcon,
  ClockIcon
} from '@heroicons/vue/24/outline'
import SearchBox from '@/components/search/SearchBox.vue'
import { useAppStore } from '@/stores/app'
import { useArticleStore } from '@/stores/article'
import { logger } from '@/utils/logger'

const router = useRouter()
const appStore = useAppStore()
const articleStore = useArticleStore()

// 响应式数据
const popularTags = ref([
  '合同', '物权', '婚姻', '继承', '侵权', '人格权', '债权'
])

// 计算属性
const favoritesCount = computed(() => articleStore.favorites.length)
const searchHistoryCount = computed(() => articleStore.searchHistory.length)
const hasRecentSearches = computed(() => articleStore.searchHistory.length > 0)
const recentSearches = computed(() => articleStore.searchHistory.slice(0, 5))

// 事件处理
const handleSearch = (query) => {
  logger.userAction('首页搜索', { query })
  router.push({
    name: 'Search',
    query: { q: query }
  })
}

const handleQuickSearch = (query) => {
  logger.userAction('快速搜索', { query })
  router.push({
    name: 'Search',
    query: { q: query }
  })
}

// 生命周期
onMounted(async () => {
  logger.userAction('访问首页')
  
  // 初始化应用设置
  appStore.initializeSettings()
  
  // 预加载搜索历史
  try {
    if (articleStore.searchHistory.length === 0) {
      await articleStore.fetchSearchHistory()
    }
  } catch (error) {
    logger.error('加载搜索历史失败:', error)
  }
})
</script>

<style scoped>
.home-page {
  @apply min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100;
}

.welcome-section {
  @apply py-12 px-4;
}

.welcome-content {
  @apply max-w-2xl mx-auto text-center;
}

.welcome-title {
  @apply text-4xl font-bold text-gray-900 mb-4;
  @apply sm:text-5xl;
}

.welcome-subtitle {
  @apply text-xl text-gray-600 mb-8;
  @apply sm:text-2xl;
}

.main-search {
  @apply max-w-lg mx-auto;
}

.quick-actions {
  @apply py-8 px-4 bg-white;
}

.quick-action-grid {
  @apply max-w-4xl mx-auto grid grid-cols-2 gap-4;
  @apply sm:grid-cols-4;
}

.quick-action-card {
  @apply relative p-6 bg-white border border-gray-200 rounded-xl;
  @apply hover:border-blue-300 hover:shadow-md;
  @apply transition-all duration-200 text-center;
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.quick-action-icon {
  @apply w-8 h-8 mx-auto mb-3 text-blue-600;
}

.quick-action-card h3 {
  @apply text-lg font-semibold text-gray-900 mb-2;
}

.quick-action-card p {
  @apply text-sm text-gray-600;
}

.badge {
  @apply absolute -top-2 -right-2 bg-red-500 text-white;
  @apply text-xs rounded-full w-6 h-6 flex items-center justify-center;
}

.recent-section,
.popular-section {
  @apply py-8 px-4 max-w-4xl mx-auto;
}

.section-title {
  @apply text-2xl font-bold text-gray-900 mb-6;
}

.recent-searches {
  @apply flex flex-wrap gap-3;
}

.recent-search-tag {
  @apply inline-flex items-center px-4 py-2;
  @apply bg-gray-100 hover:bg-gray-200;
  @apply text-sm text-gray-700 rounded-full;
  @apply transition-colors duration-200;
}

.recent-search-tag span {
  @apply text-xs text-gray-500 ml-1;
}

.popular-tags {
  @apply flex flex-wrap gap-3;
}

.popular-tag {
  @apply px-4 py-2 bg-blue-100 hover:bg-blue-200;
  @apply text-blue-800 rounded-full text-sm font-medium;
  @apply transition-colors duration-200;
}

.stats-section {
  @apply py-8 px-4 bg-gray-50;
}

.stats-grid {
  @apply max-w-4xl mx-auto grid grid-cols-2 gap-6;
  @apply sm:grid-cols-4;
}

.stat-item {
  @apply text-center;
}

.stat-number {
  @apply text-3xl font-bold text-blue-600 mb-2;
}

.stat-label {
  @apply text-sm text-gray-600;
}

/* 响应式设计 */
@media (max-width: 640px) {
  .welcome-title {
    @apply text-3xl;
  }
  
  .welcome-subtitle {
    @apply text-lg;
  }
  
  .quick-action-card {
    @apply p-4;
  }
  
  .quick-action-card h3 {
    @apply text-base;
  }
  
  .section-title {
    @apply text-xl;
  }
}
</style>
